<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Simple Radar Chart</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Simple Radar Chart</p>
<hr class="separator">
<div class="content">
<img src="images/simpleradar.png" width='450' height='350'>
<br><br>
This example demonstrates the basic steps in creating radar charts.<br><br>
<ul><li> Create a <a href="PolarChart.htm">PolarChart</a> object using <a href="PolarChart.PolarChart.htm">PolarChart.PolarChart</a>.<br><br>
<li> Specify the polar plot area of the chart using <a href="PolarChart.setPlotArea.htm">PolarChart.setPlotArea</a>.<br><br>
<li> Add a polar area layer and specify the data for the area using <a href="PolarChart.addAreaLayer.htm">PolarChart.addAreaLayer</a>.<br><br>
<li> Specify the labels on the angular axis using <a href="AngularAxis.setLabels.htm">AngularAxis.setLabels</a>. In a polar/radar chart, the radial axis refers to the axis from the center to the perimeter of the plot area, and the angular axis refers to the axis lying on the perimeter of the plot area.<br><br>
<li> Assign the chart to the WebChartViewer using <a href="WebChartViewer.setChart.htm">WebChartViewer.setChart</a>, and insert it to the web page using <a href="WebChartViewer.renderHTML.htm">WebChartViewer.renderHTML</a>.<br><br>
<li> Generate tool tips for the chart using <a href="BaseChart.getHTMLImageMap.htm">BaseChart.getHTMLImageMap</a>.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/simpleradar.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The data for the chart
double[] data = {90, 60, 65, 75, 40};

// The labels for the chart
String[] labels = {"Speed", "Reliability", "Comfort", "Safety", "Efficiency"};

// Create a PolarChart object of size 450 x 350 pixels
PolarChart c = new PolarChart(450, 350);

// Set center of plot area at (225, 185) with radius 150 pixels
c.setPlotArea(225, 185, 150);

// Add an area layer to the polar chart
c.addAreaLayer(data, 0x9999ff);

// Set the labels to the angular axis as spokes
c.angularAxis().setLabels(labels);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "", "title='{label}: score = {value}'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Simple Radar Chart&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Simple Radar Chart
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
